<template>
  <div class="register-page">
    <div class="register-box">
      <h2>注册</h2>
      <form @submit.prevent="handleRegister">
        <div class="input-group">
          <label for="email">邮箱</label>
          <input type="text" id="email" v-model="user.email" placeholder="请输入邮箱" />
        </div>
        <div class="input-group">
          <label for="captcha">验证码</label>
          <div style="display: flex; width: 100%; gap: 10px;">
            <input
                type="text"
                id="captcha"
                v-model="captcha"
                placeholder="请输入验证码"
                style="flex: 1;" />
            <button
                type="button"
                @click="sendCaptcha"
                class="register-btn"
                :disabled="captchaButtonDisabled"
                style="flex: 1; text-align: center;">
              {{ captchaButtonText }}
            </button>
          </div>
        </div>
        <div class="input-group">
          <label for="username">昵称</label>
          <input type="text" id="username" v-model="user.username" placeholder="昵称必须为1~10个字符" />
        </div>
        <div class="input-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="user.password" placeholder="密码必须包含数字和字母，且长度至少8位" />
        </div>
        <div class="input-group">
          <label for="confirmPassword">确认密码</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请确认密码" />
        </div>
        <button type="submit" class="register-btn">注册</button>
        <p class="login-link">已有账号？<a @click.prevent="goToLogin" href="#">登录</a></p>
      </form>
    </div>
  </div>
</template>

<script>
import {sendCaptchaService, userRegisterService, verifyCaptchaService} from "@/api/user";

export default {
  name: "AIORegister",
  data() {
    return {
      user: {
        email: "",
        username: "",
        password: "",
      },
      confirmPassword: "",
      captcha: "", // 验证码输入框绑定的值
      captchaButtonText: "发送验证码",
      captchaButtonDisabled: false, // 验证码按钮是否禁用
    };
  },
  methods: {
    // 注册按钮点击
    async handleRegister() {
      if (!this.captcha) {
        alert("请填写验证码");
        return;
      }
      if (this.user.password !== this.confirmPassword) {
        alert("两次输入的密码不一致");
        return;
      }
      if (this.user.username && this.user.password) {
        // 验证验证码是否正确
        const captchaResult = await verifyCaptchaService(this.user.email, this.captcha);
        if (captchaResult.code !== "0") {
          alert(captchaResult.message ? captchaResult.message : "验证码无效或已过期");
          return;
        }
        const result = await userRegisterService(this.user);
        if (result.code === "0") {
          alert("注册成功！现在跳转到登录页面。");
          this.$router.push("/AIOLogin");
        } else {
          alert(result.message ? result.message : "注册失败！请重新填写。");
        }
      } else {
        alert("请完整填写表单");
      }
    },

    // 发送验证码按钮点击
    async sendCaptcha() {
      if (!this.user.email) {
        alert("请填写邮箱");
        return;
      }

      try {
        const result = await sendCaptchaService(this.user.email);
        if (result.code === "0") {
          alert("验证码已发送，请查收邮箱！");
          this.startCaptchaTimer(); // 启动按钮倒计时
        } else {
          alert(result.message ? result.message : "发送验证码失败！");
        }
      } catch (error) {
        console.error("发送验证码时出错", error);
      }
    },

    // 验证码按钮倒计时
    startCaptchaTimer() {
      this.captchaButtonDisabled = true;
      let count = 60;
      this.captchaButtonText = `${count}s 后可重发`;

      const timer = setInterval(() => {
        count--;
        if (count <= 0) {
          clearInterval(timer);
          this.captchaButtonText = "发送验证码";
          this.captchaButtonDisabled = false;
        } else {
          this.captchaButtonText = `${count}s 后可重发`;
        }
      }, 1000);
    },

    goToLogin() {
      this.$router.push("/AIOLogin");
    },
  },
};
</script>

<style scoped>
.register-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  color: #fff;
}

.register-box {
  width: 300px;
  padding: 20px;
  background-color: #222;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #ffcd00;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
}

.register-btn {
  width: 100%;
  padding: 10px;
  background-color: #ffcd00;
  border: none;
  border-radius: 5px;
  color: #000;
  font-size: 16px;
  cursor: pointer;
}

.register-btn:hover {
  background-color: #e5b800;
}

.login-link {
  margin-top: 15px;
  text-align: center;
}

.login-link a {
  color: #ffcd00;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}
</style>
